<template>
  <view class="min-h-screen w-full max-w-[750rpx] bg-gray-50 mx-auto pb-[120rpx]">
    <backView :back="goBack" title="居家护理专项评估" />

    <!-- 评估标题 -->
    <view class="p-[32rpx] text-center">
      <text class="text-[36rpx] font-bold text-gray-800">居家护理专项评估</text>
    </view>

    <!-- 评估项目列表 -->
    <view class="assessment-list">
      <view v-for="item in assessmentItems" :key="item.id" class="assessment-item">
        <!-- 评估项目标题区域 -->
        <view class="assessment-title-section">
          <view class="title-container">
            <view class="title-number">{{ item.id.slice(-1) }}</view>
            <view class="title-content">
              <text class="main-title">{{ item.title }}</text>
              <view class="title-decoration"></view>
            </view>
          </view>

          <view class="subtitle-container">
            <view class="subtitle-icon">🎯</view>
            <text class="subtitle-text">{{ item.subtitle }}</text>
          </view>

          <view class="description-container">
            <view class="description-icon">📋</view>
            <text class="description-text">{{ item.description }}</text>
          </view>

          <view class="title-bottom-decoration"></view>
        </view>

        <!-- 三个视角模块 -->
        <view class="perspectives-container">
          <!-- 服务对象视角 -->
          <view class="bg-white rounded-[20rpx] shadow-md mb-[24rpx] overflow-hidden mx-[24rpx]">
            <view class="perspective-header patient-perspective" @click="toggleCollapse('patientPerspective')">
              <view class="perspective-title-container">
                <!-- <view class="perspective-number">1</view> -->
                <view class="perspective-content">
                  <text class="perspective-title">服务对象（患者）视角</text>
                  <view class="perspective-subtitle">Patient Perspective</view>
                </view>
              </view>
              <view class="flex items-center gap-[8rpx]">
                <IconFont
                  :name="collapseStates.patientPerspective ? 'arrow-up' : 'arrow-down'"
                  size="12"
                  color="#8bc34a"
                  :class="['transition-transform duration-200', collapseStates.patientPerspective ? 'rotate-180' : 'rotate-0']"
                />
                <!-- <view class="bg-blue-500 text-white px-[8rpx] py-[4rpx] rounded-full">
                  <text class="text-[20rpx] font-bold">{{ item.score }}</text>
                </view> -->
              </view>
            </view>
            <view v-show="collapseStates.patientPerspective" class="p-[24rpx] space-y-[16rpx] transition-all duration-300">
              <!-- 人口信息学 -->
              <view v-if="item.patient.demographics" class="border border-blue-200 rounded-[12rpx] p-[16rpx] bg-blue-50">
                <text class="text-[24rpx] font-semibold text-blue-800 block mb-[12rpx]">📊 人口信息学</text>
                <text class="text-[20rpx] text-blue-700 block mb-[16rpx]">{{ item.patient.demographics }}</text>

                <ItemWithImagesCard
                  :model-value="{
                    title: '',
                    description: formData[`${item.id}_patientDemographics`] || '',
                    images: formData[`${item.id}_patientDemographicsImages`] || [],
                  }"
                  @update:model-value="
                    (data) => {
                      updateField(`${item.id}_patientDemographics`, data.description);
                      if (data.images?.length) updateField(`${item.id}_patientDemographicsImages`, data.images);
                    }
                  "
                  :show-title="false"
                  description-label="人口信息学评估"
                  description-placeholder="请填写人口信息学相关评估内容"
                  :description-rows="4"
                  border-color="border-blue-300"
                />
              </view>

              <!-- 社会经济学 -->
              <view v-if="item.patient.socioeconomics" class="border border-green-200 rounded-[12rpx] p-[16rpx] bg-green-50">
                <text class="text-[24rpx] font-semibold text-green-800 block mb-[12rpx]">💰 社会经济学</text>
                <text class="text-[20rpx] text-green-700 block mb-[16rpx]">{{ item.patient.socioeconomics }}</text>

                <ItemWithImagesCard
                  :model-value="{
                    title: '',
                    description: formData[`${item.id}_patientEconomics`] || '',
                    images: formData[`${item.id}_patientEconomicsImages`] || [],
                  }"
                  @update:model-value="
                    (data) => {
                      updateField(`${item.id}_patientEconomics`, data.description);
                      if (data.images?.length) updateField(`${item.id}_patientEconomicsImages`, data.images);
                    }
                  "
                  :show-title="false"
                  description-label="社会经济学评估"
                  description-placeholder="请填写社会经济学相关评估内容"
                  :description-rows="3"
                  border-color="border-green-300"
                />
              </view>

              <!-- 文化属性 -->
              <view v-if="item.patient.cultural" class="border border-purple-200 rounded-[12rpx] p-[16rpx] bg-purple-50">
                <text class="text-[24rpx] font-semibold text-purple-800 block mb-[12rpx]">🎭 文化属性</text>
                <text class="text-[20rpx] text-purple-700 block mb-[16rpx]">{{ item.patient.cultural }}</text>

                <ItemWithImagesCard
                  :model-value="{
                    title: '',
                    description: formData[`${item.id}_patientCulture`] || '',
                    images: formData[`${item.id}_patientCultureImages`] || [],
                  }"
                  @update:model-value="
                    (data) => {
                      updateField(`${item.id}_patientCulture`, data.description);
                      if (data.images?.length) updateField(`${item.id}_patientCultureImages`, data.images);
                    }
                  "
                  :show-title="false"
                  description-label="文化属性评估"
                  description-placeholder="请填写文化属性相关评估内容"
                  :description-rows="4"
                  border-color="border-purple-300"
                />
              </view>
            </view>
          </view>

          <!-- 监护人视角 -->
          <view class="bg-white rounded-[20rpx] shadow-md mb-[24rpx] overflow-hidden mx-[24rpx]">
            <view class="perspective-header guardian-perspective" @click="toggleCollapse('guardianPerspective')">
              <view class="perspective-title-container">
                <!-- <view class="perspective-number">2</view> -->
                <view class="perspective-content">
                  <text class="perspective-title">监护人（家属/照护者）视角</text>
                  <view class="perspective-subtitle">Guardian Perspective</view>
                </view>
              </view>
              <view class="flex items-center gap-[8rpx]">
                <IconFont
                  :name="collapseStates.guardianPerspective ? 'arrow-up' : 'arrow-down'"
                  size="12"
                  color="#8bc34a"
                  :class="['transition-transform duration-200', collapseStates.guardianPerspective ? 'rotate-180' : 'rotate-0']"
                />
                <!-- <view class="bg-blue-500 text-white px-[8rpx] py-[4rpx] rounded-full">
                  <text class="text-[20rpx] font-bold">{{ item.score }}</text>
                </view> -->
              </view>
            </view>
            <view v-show="collapseStates.guardianPerspective" class="p-[24rpx] space-y-[16rpx] transition-all duration-300">
              <!-- 人口信息学 -->
              <view v-if="item.guardian.demographics" class="border border-orange-200 rounded-[12rpx] p-[16rpx] bg-orange-50">
                <text class="text-[24rpx] font-semibold text-orange-800 block mb-[12rpx]">👥 人口信息学</text>
                <text class="text-[20rpx] text-orange-700 block mb-[16rpx]">{{ item.guardian.demographics }}</text>

                <ItemWithImagesCard
                  :model-value="{
                    title: '',
                    description: formData[`${item.id}_guardianDemographics`] || '',
                    images: formData[`${item.id}_guardianDemographicsImages`] || [],
                  }"
                  @update:model-value="
                    (data) => {
                      updateField(`${item.id}_guardianDemographics`, data.description);
                      if (data.images?.length) updateField(`${item.id}_guardianDemographicsImages`, data.images);
                    }
                  "
                  :show-title="false"
                  description-label="人口信息学评估"
                  description-placeholder="请填写人口信息学相关评估内容"
                  :description-rows="4"
                  border-color="border-orange-300"
                />
              </view>

              <!-- 社会经济学 -->
              <view v-if="item.guardian.socioeconomics" class="border border-teal-200 rounded-[12rpx] p-[16rpx] bg-teal-50">
                <text class="text-[24rpx] font-semibold text-teal-800 block mb-[12rpx]">💳 社会经济学</text>
                <text class="text-[20rpx] text-teal-700 block mb-[16rpx]">{{ item.guardian.socioeconomics }}</text>

                <ItemWithImagesCard
                  :model-value="{
                    title: '',
                    description: formData[`${item.id}_guardianEconomics`] || '',
                    images: formData[`${item.id}_guardianEconomicsImages`] || [],
                  }"
                  @update:model-value="
                    (data) => {
                      updateField(`${item.id}_guardianEconomics`, data.description);
                      if (data.images?.length) updateField(`${item.id}_guardianEconomicsImages`, data.images);
                    }
                  "
                  :show-title="false"
                  description-label="社会经济学评估"
                  description-placeholder="请填写社会经济学相关评估内容"
                  :description-rows="3"
                  border-color="border-teal-300"
                />
              </view>

              <!-- 文化属性 -->
              <view v-if="item.guardian.cultural" class="border border-pink-200 rounded-[12rpx] p-[16rpx] bg-pink-50">
                <text class="text-[24rpx] font-semibold text-pink-800 block mb-[12rpx]">🏠 文化属性</text>
                <text class="text-[20rpx] text-pink-700 block mb-[16rpx]">{{ item.guardian.cultural }}</text>

                <ItemWithImagesCard
                  :model-value="{
                    title: '',
                    description: formData[`${item.id}_guardianCulture`] || '',
                    images: formData[`${item.id}_guardianCultureImages`] || [],
                  }"
                  @update:model-value="
                    (data) => {
                      updateField(`${item.id}_guardianCulture`, data.description);
                      if (data.images?.length) updateField(`${item.id}_guardianCultureImages`, data.images);
                    }
                  "
                  :show-title="false"
                  description-label="文化属性评估"
                  description-placeholder="请填写文化属性相关评估内容"
                  :description-rows="4"
                  border-color="border-pink-300"
                />
              </view>
            </view>
          </view>

          <!-- 服务人员视角 -->
          <view class="bg-white rounded-[20rpx] shadow-md mb-[24rpx] overflow-hidden mx-[24rpx]">
            <view class="perspective-header nurse-perspective" @click="toggleCollapse('nursePerspective')">
              <view class="perspective-title-container">
                <!-- <view class="perspective-number">3</view> -->
                <view class="perspective-content">
                  <text class="perspective-title">服务人员（护士）视角</text>
                  <view class="perspective-subtitle">Nurse Perspective</view>
                </view>
              </view>
              <view class="flex items-center gap-[8rpx]">
                <IconFont
                  :name="collapseStates.nursePerspective ? 'arrow-up' : 'arrow-down'"
                  size="12"
                  color="#8bc34a"
                  :class="['transition-transform duration-200', collapseStates.nursePerspective ? 'rotate-180' : 'rotate-0']"
                />
                <!-- <view class="bg-blue-500 text-white px-[8rpx] py-[4rpx] rounded-full">
                  <text class="text-[20rpx] font-bold">{{ item.score }}</text>
                </view> -->
              </view>
            </view>
            <view v-show="collapseStates.nursePerspective" class="p-[24rpx] space-y-[16rpx] transition-all duration-300">
              <!-- 人口信息学 -->
              <view v-if="item.nurse.demographics" class="border border-indigo-200 rounded-[12rpx] p-[16rpx] bg-indigo-50">
                <text class="text-[24rpx] font-semibold text-indigo-800 block mb-[12rpx]">👨‍⚕️ 人口信息学</text>
                <text class="text-[20rpx] text-indigo-700 block mb-[16rpx]">{{ item.nurse.demographics }}</text>

                <ItemWithImagesCard
                  :model-value="{
                    title: '',
                    description: formData[`${item.id}_nurseDemographics`] || '',
                    images: formData[`${item.id}_nurseDemographicsImages`] || [],
                  }"
                  @update:model-value="
                    (data) => {
                      updateField(`${item.id}_nurseDemographics`, data.description);
                      if (data.images?.length) updateField(`${item.id}_nurseDemographicsImages`, data.images);
                    }
                  "
                  :show-title="false"
                  description-label="人口信息学评估"
                  description-placeholder="请填写人口信息学相关评估内容"
                  :description-rows="4"
                  border-color="border-indigo-300"
                />
              </view>

              <!-- 社会经济学 -->
              <view v-if="item.nurse.socioeconomics" class="border border-yellow-200 rounded-[12rpx] p-[16rpx] bg-yellow-50">
                <text class="text-[24rpx] font-semibold text-yellow-800 block mb-[12rpx]">💼 社会经济学</text>
                <text class="text-[20rpx] text-yellow-700 block mb-[16rpx]">{{ item.nurse.socioeconomics }}</text>

                <ItemWithImagesCard
                  :model-value="{
                    title: '',
                    description: formData[`${item.id}_nurseEconomics`] || '',
                    images: formData[`${item.id}_nurseEconomicsImages`] || [],
                  }"
                  @update:model-value="
                    (data) => {
                      updateField(`${item.id}_nurseEconomics`, data.description);
                      if (data.images?.length) updateField(`${item.id}_nurseEconomicsImages`, data.images);
                    }
                  "
                  :show-title="false"
                  description-label="社会经济学评估"
                  description-placeholder="请填写社会经济学相关评估内容"
                  :description-rows="3"
                  border-color="border-yellow-300"
                />
              </view>

              <!-- 文化属性 -->
              <view v-if="item.nurse.cultural" class="border border-red-200 rounded-[12rpx] p-[16rpx] bg-red-50">
                <text class="text-[24rpx] font-semibold text-red-800 block mb-[12rpx]">⚕️ 文化属性</text>
                <text class="text-[20rpx] text-red-700 block mb-[16rpx]">{{ item.nurse.cultural }}</text>

                <ItemWithImagesCard
                  :model-value="{
                    title: '',
                    description: formData[`${item.id}_nurseCulture`] || '',
                    images: formData[`${item.id}_nurseCultureImages`] || [],
                  }"
                  @update:model-value="
                    (data) => {
                      updateField(`${item.id}_nurseCulture`, data.description);
                      if (data.images?.length) updateField(`${item.id}_nurseCultureImages`, data.images);
                    }
                  "
                  :show-title="false"
                  description-label="文化属性评估"
                  description-placeholder="请填写文化属性相关评估内容"
                  :description-rows="4"
                  border-color="border-red-300"
                />
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 操作按钮 -->
    <view class="flex-center gap-[16rpx] mt-[32rpx] px-[24rpx]">
      <nut-button type="default" size="normal" class="flex-1" @click="goBack">取消</nut-button>
      <nut-button type="primary" size="normal" class="flex-1" @click="saveAssessment">保存评估</nut-button>
    </view>
  </view>
</template>

<script setup lang="ts">
import { reactive, ref, onMounted } from "vue";
import Taro from "@tarojs/taro";
import backView from "@/components/backView.vue";
import ItemWithImagesCard from "@/components/ItemWithImagesCard.vue";
import { IconFont } from "@nutui/icons-vue-taro";

// 评估项目配置
const assessmentItems = ref([
  {
    id: "serviceCompatibility",
    title: "1.服务项目适配性评估",
    subtitle: "确保服务、患者、环境、文化四者匹配",
    score: 12,
    description: "目的：确保服务、患者、环境、文化四者匹配。",
    patient: {
      demographics: "自身语言表达能力、听力视力状况是否足以准确描述需求和理解护士提问",
      socioeconomics: "对服务费用的认知和支付意愿。",
      cultural: "对接受陌生人服务的态度、对疾病的看法和期望。"
    },
    guardian: {
      demographics: "其与患者的关系、联系方式、自身年龄和语言能力（是否为有效沟通桥梁）。",
      socioeconomics: "实际支付者，对服务价值的认同度。",
      cultural: "家庭决策习惯（谁做主），对患者隐私的看法，对服务的期望值。"
    },
    nurse: {
      demographics: "评估患者/监护人的沟通有效性，选择其能理解的语言和方式沟通。",
      socioeconomics: "核实支付方式，感知其经济压力以避免推荐不必要的增值服务。",
      cultural: "敏锐察觉文化禁忌（如性别偏好、宗教禁忌），尊重家庭决策模式，确认服务与患者价值观无冲突。"
    },
  },
  {
    id: "technicalFeasibility",
    title: "2.技术可行性评估",
    subtitle: "评估在具体场景下安全完成技术操作的客观条件",
    score: 10,
    description: "目的：评估在具体场景下安全完成技术操作的客观条件。",
    patient: {
      socioeconomics: "居住环境（空间大小、整洁度、宠物情况）是否满足操作的基本要求。",
      cultural: "对“家”这个私有空间被用作“医疗场所”的接受度。"
    },
    guardian: {
      socioeconomics: "能否提供或协助准备操作所需的环境（如腾空桌面、稳定座椅、管理宠物）。",
      cultural: "对操作可能带来的“污染”（如医疗废弃物）的忌讳程度。"
    },
    nurse: {
      demographics: "根据患者年龄、体型判断所需设备型号（如儿童专用压脉带）。",
      socioeconomics: "评估环境中是否存在安全风险（如老旧电线、光线昏暗、地面湿滑），并判断能否现场 mitigating（缓解）。",
      cultural: "评估操作是否需触及隐私部位，如何在不违背患者文化习惯的前提下（如要求同性家属在场、用帘子遮挡）完成操作。"
    },
  },
  {
    id: "riskControl",
    title: "3.风险控制评估",
    subtitle: "识别并预防服务全流程中的特定风险",
    score: 10,
    description: "目的：识别并预防服务全流程中的特定风险。",
    patient: {
      demographics: "因其年龄、认知状况可能带来的特有风险（如儿童好动、长者易跌倒）。",
      cultural: "可能因文化信仰而拒绝某些标准风险防范措施（如拒绝输血）。"
    },
    guardian: {
      socioeconomics: "其照护能力和精力能否持续执行护士交代的风险预防措施（如翻身、监督服药）。",
      cultural: "其对风险的重视程度和应对意愿。"
    },
    nurse: {
      demographics: "综合患者年龄、病史、功能状态预测操作中及操作后的风险。",
      socioeconomics: "评估家庭支持系统是否足以在服务后应对可能发生的并发症（如24小时有无监护人）。",
      cultural: "将风险告知方式“翻译”成患者和监护人能文化认同的方式，确保风险信息被正确理解而非引起反感。"
    },
  },
  {
    id: "effectPrediction",
    title: "4.效果预测评估",
    subtitle: "管理期望，共同设定可实现的服务目标",
    score: 10,
    description: "目的：管理期望，共同设定可实现的服务目标。",
    patient: {
      demographics: "其教育水平和认知能力决定了对效果的理解程度（需用通俗语言或可视化工具）。",
      cultural: "其健康观念可能影响对效果的评判（如认为“输液比口服药效果好”）。"
    },
    guardian: {
      socioeconomics: "其对服务效果的期望是否现实，是否追求“根治”等不切实际的目标。",
      cultural: "其可能更关注症状缓解而非功能改善。"
    },
    nurse: {
      demographics: "用符合服务对象认知水平的方式解释短期与长期效果。",
      socioeconomics: "设定符合其资源可持续性的康复目标（如推荐其能负担起的耗材）。",
      cultural: "将“效果”的定义与患者及家庭看重的价值相结合（如“稳定后可以继续参加宗教活动”），提升依从性。"
    },
  },
  {
    id: "emergencyResponse",
    title: "5.应急评估",
    subtitle: "确保意外发生时，能迅速、有效地响应",
    score: 10,
    description: "目的：确保意外发生时，能迅速、有效地响应。",
    patient: {
      demographics: "其自身在紧急情况下的呼救和能力（如能否自行拨打急救电话）。"
    },
    guardian: {
      demographics: "其是否常住在此，联系方式是否有效。",
      socioeconomics: "其是否知晓并同意可能产生的额外应急费用（如转诊、急诊费用）。",
      cultural: "紧急情况下，其更倾向于选择的求助对象（如社区医院、三甲医院或私人诊所）。"
    },
    nurse: {
      demographics: "预先识别服务对象可能无法清晰表达不适的风险。",
      socioeconomics: "评估其就近医疗资源的可及性（如最近医院的距离、等级、医保对接情况）。",
      cultural: "了解在紧急情况下，家庭内部的决策流程和关键联系人，尊重其关于生命末期救治意愿的文化偏好（如是否同意抢救）。"
    },
  },
]);

// 折叠状态管理
const collapseStates = reactive({
  patientPerspective: false, // 服务对象视角
  guardianPerspective: false, // 监护人视角
  nursePerspective: false, // 服务人员视角
});

// 切换折叠状态
const toggleCollapse = (section: keyof typeof collapseStates) => {
  collapseStates[section] = !collapseStates[section];
};

// 评估数据
const formData = reactive({} as Record<string, any>);

// 更新字段
function updateField(field: string, value: any) {
  (formData as any)[field] = value;
}

// 返回上一页
function goBack() {
  Taro.navigateBack();
}

// 保存评估
function saveAssessment() {
  console.log("保存居家护理专项评估:", formData);

  Taro.showToast({
    title: "保存成功",
    icon: "success",
    duration: 2000,
  });

  // 这里可以添加保存到后端的逻辑
  setTimeout(() => {
    Taro.navigateBack();
  }, 2000);
}

onMounted(() => {
  console.log("居家护理专项评估页面加载完成");
});
</script>

<style scoped lang="scss">
.btops {
  background: linear-gradient(135deg, #e4f0e4 0%, #d4edda 100%);
}

/* 评估项目列表样式 */
.assessment-list {
  .assessment-item {
    margin-bottom: 48rpx;

    &:last-child {
      margin-bottom: 0;
    }
  }
}

/* 评估标题区域样式 */
.assessment-title-section {
  padding: 40rpx 32rpx 32rpx;
  text-align: center;
  position: relative;
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  border-radius: 20rpx;
  margin: 0 24rpx 24rpx;
  overflow: hidden;

  &::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4rpx;
    background: linear-gradient(90deg, #3b82f6, #8b5cf6, #06b6d4, #10b981);
  }
}

.title-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16rpx;
  margin-bottom: 24rpx;
}

.title-number {
  width: 60rpx;
  height: 60rpx;
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28rpx;
  font-weight: 700;
  box-shadow: 0 4rpx 12rpx rgba(59, 130, 246, 0.3);
  position: relative;

  &::after {
    content: "";
    position: absolute;
    inset: -4rpx;
    border-radius: 50%;
    background: linear-gradient(135deg, #3b82f6, #8b5cf6);
    z-index: -1;
    opacity: 0.3;
  }
}

.title-content {
  flex: 1;
  text-align: left;
}

.main-title {
  font-size: 32rpx;
  font-weight: 700;
  color: #1e293b;
  line-height: 1.3;
  display: block;
}

.title-decoration {
  width: 60rpx;
  height: 3rpx;
  background: linear-gradient(90deg, #3b82f6, #8b5cf6);
  border-radius: 2rpx;
  margin-top: 8rpx;
}

.subtitle-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12rpx;
  margin-bottom: 16rpx;
  padding: 12rpx 20rpx;
  background: rgba(59, 130, 246, 0.1);
  border-radius: 16rpx;
  border: 1rpx solid rgba(59, 130, 246, 0.2);
}

.subtitle-icon {
  font-size: 24rpx;
  filter: drop-shadow(0 2rpx 4rpx rgba(0, 0, 0, 0.1));
}

.subtitle-text {
  font-size: 26rpx;
  font-weight: 600;
  color: #475569;
  line-height: 1.4;
}

.description-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12rpx;
  margin-bottom: 24rpx;
  padding: 12rpx 20rpx;
  background: rgba(148, 163, 184, 0.1);
  border-radius: 16rpx;
  border: 1rpx solid rgba(148, 163, 184, 0.2);
}

.description-icon {
  font-size: 20rpx;
  filter: drop-shadow(0 2rpx 4rpx rgba(0, 0, 0, 0.1));
}

.description-text {
  font-size: 22rpx;
  font-weight: 500;
  color: #64748b;
  line-height: 1.5;
}

.title-bottom-decoration {
  width: 100rpx;
  height: 3rpx;
  background: linear-gradient(90deg, transparent, #3b82f6, transparent);
  border-radius: 2rpx;
  margin: 0 auto;
}

/* 视角容器样式 */
.perspectives-container {
  background: rgba(248, 250, 252, 0.5);
  padding: 16rpx 0;
  border-radius: 16rpx;
  margin: 0 24rpx;
}

/* 评分徽章样式 */
.bg-blue-500 {
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
}

.bg-blue-500 text {
  font-weight: 600;
  text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.1);
}

/* 动画优化 */
.transition-all {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.transition-transform {
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 响应式设计 */
@media (max-width: 750rpx) {
  .assessment-list {
    .assessment-item {
      margin-bottom: 32rpx;
    }
  }

  .perspectives-container {
    margin: 0 16rpx;
  }
}

/* 悬浮效果增强 */
.bg-white {
  transition: box-shadow 0.3s ease;

  &:active {
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.12);
  }
}

/* 评分徽章动画 */
.bg-blue-500 {
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

/* 标题区域优化 */
.p-\[32rpx\] {
  position: relative;

  &::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60rpx;
    height: 3rpx;
    background: linear-gradient(90deg, #3b82f6, #8b5cf6);
    border-radius: 2rpx;
  }
}

/* 视角标题区域样式增强 */
.perspective-header {
  padding: 24rpx;
  border-bottom: 1rpx solid #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;

  &::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3rpx;
    background: linear-gradient(90deg, transparent, #8bc34a, transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
  }

  &:hover {
    background: rgba(139, 195, 74, 0.05);

    &::before {
      opacity: 1;
    }
  }

  &:active {
    transform: scale(0.98);
  }
}

.perspective-title-container {
  display: flex;
  align-items: center;
  gap: 16rpx;
  flex: 1;
}

.perspective-number {
  width: 40rpx;
  height: 40rpx;
  background: linear-gradient(135deg, #8bc34a 0%, #689f38 100%);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20rpx;
  font-weight: 700;
  box-shadow: 0 2rpx 8rpx rgba(139, 195, 74, 0.3);
  position: relative;

  &::after {
    content: "";
    position: absolute;
    inset: -2rpx;
    border-radius: 50%;
    background: linear-gradient(135deg, #8bc34a, #689f38);
    z-index: -1;
    opacity: 0.2;
  }
}

.perspective-content {
  flex: 1;
}

.perspective-title {
  font-size: 28rpx;
  font-weight: 700;
  color: #1e293b;
  line-height: 1.3;
  display: block;
  margin-bottom: 4rpx;
}

.perspective-subtitle {
  font-size: 18rpx;
  font-weight: 500;
  color: #64748b;
  line-height: 1.2;
  font-style: italic;
  letter-spacing: 0.5rpx;
}

/* 不同视角的主题色 */
.patient-perspective {
  .perspective-number {
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    box-shadow: 0 2rpx 8rpx rgba(59, 130, 246, 0.3);
  }

  &::before {
    background: linear-gradient(90deg, transparent, #3b82f6, transparent);
  }

  &:hover {
    background: rgba(59, 130, 246, 0.05);
  }
}

.guardian-perspective {
  .perspective-number {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    box-shadow: 0 2rpx 8rpx rgba(245, 158, 11, 0.3);
  }

  &::before {
    background: linear-gradient(90deg, transparent, #f59e0b, transparent);
  }

  &:hover {
    background: rgba(245, 158, 11, 0.05);
  }
}

.nurse-perspective {
  .perspective-number {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
    box-shadow: 0 2rpx 8rpx rgba(139, 92, 246, 0.3);
  }

  &::before {
    background: linear-gradient(90deg, transparent, #8b5cf6, transparent);
  }

  &:hover {
    background: rgba(139, 92, 246, 0.05);
  }
}

/* 卡片悬浮效果 */
.shadow-md {
  transition: all 0.3s ease;

  &:hover {
    transform: translateY(-2rpx);
    box-shadow: 0 8rpx 25rpx rgba(0, 0, 0, 0.12);
  }
}

/* 响应式优化 */
@media (max-width: 750rpx) {
  .assessment-title-section {
    padding: 32rpx 24rpx 24rpx;
    margin: 0 16rpx 16rpx;
  }

  .title-number {
    width: 50rpx;
    height: 50rpx;
    font-size: 24rpx;
  }

  .main-title {
    font-size: 28rpx;
  }

  .subtitle-text {
    font-size: 24rpx;
  }

  .description-text {
    font-size: 20rpx;
  }

  .perspective-number {
    width: 36rpx;
    height: 36rpx;
    font-size: 18rpx;
  }

  .perspective-title {
    font-size: 26rpx;
  }

  .perspective-subtitle {
    font-size: 16rpx;
  }
}

/* 动画增强 */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20rpx);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.assessment-item {
  animation: fadeInUp 0.6s ease-out;
}

/* 主题色彩搭配 */
:root {
  --primary-blue: #3b82f6;
  --primary-green: #8bc34a;
  --primary-orange: #f59e0b;
  --primary-purple: #8b5cf6;
  --text-primary: #1e293b;
  --text-secondary: #475569;
  --text-muted: #64748b;
  --bg-primary: #f8fafc;
  --bg-secondary: #e2e8f0;
}

/* 深色模式支持 */
@media (prefers-color-scheme: dark) {
  .assessment-title-section {
    background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
  }

  .main-title {
    color: #f1f5f9;
  }

  .subtitle-text {
    color: #cbd5e1;
  }

  .description-text {
    color: #94a3b8;
  }

  .perspective-title {
    color: #f1f5f9;
  }

  .perspective-subtitle {
    color: #94a3b8;
  }
}
</style>
